<template>
	<view>
		<loading ref="loading"></loading>
		<view class="" v-if="loadFlag">
			<view class="">
				<image src="/static/user_bg.jpg" style="width: 100%;height: 430rpx;position: absolute;top: 0;"></image>
			</view>
			<view :style="{height: (navHeight-20)+'rpx'}"></view>
			<view class="u-flex u-row-between u-p-r-40">
				<view class="u-flex u-row-between u-col-center u-p-r-40" style="position: relative;">
					<view class="user u-p-l-40 u-p-r-40 u-flex u-row-left u-col-center" @click="loginClick">
						<view class="" style="width: 150rpx;">
							<image class="avatar" :src="vk.getVuex('$user.userInfo.avatar')?vk.getVuex('$user.userInfo.avatar'):'/static/avatar.png'" mode="aspectFill" :style="{borderColor: vk.getVuex('$app.config.bg.navbar')}"></image>
						</view>
						<view class="u-p-l-20">
							<view class="u-flex u-row-left">
								<view class="name u-font-20 u-p-b-10 u-p-r-10">{{vk.getVuex('$user.userInfo.nickname')?vk.getVuex('$user.userInfo.nickname'):'登录/注册'}}</view>
							</view>
							<view class="addr u-font-12" :style="{color: vk.getVuex('$app.config.color.tips')}">{{vk.getVuex('$setting.base.desc')}}</view>
							<view class="" v-if="vk.getVuex('$user.userInfo._id')">
								<view :style="{color: vk.getVuex('$app.config.color.sec')}" class="number u-font-12 u-m-t-10">余额：{{vk.getVuex('$user.userInfo.score')}} {{vk.getVuex('$setting.score.name')}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="vk.getVuex('$user.userInfo._id')" style="width: 52rpx;height: 52rpx;position: relative;">
					<u-icon name="/static/icon/notice.png" size="52" @click="noticeClick"></u-icon>
					<view v-if="noticeCount > 0" style="position: absolute;top: 4rpx;right: 4rpx;width: 13rpx;height: 13rpx;border-radius: 14rpx;background-color: #FF0000"></view>
				</view>
			</view>
			<view class="jifen u-flex u-row-left u-m-l-30 u-m-r-30 u-m-t-50 bg-white border-ra" :style="{background: vk.getVuex('$app.config.bg.tab')}">
				<view class="tab u-flex-col u-row-center u-col-center u-p-t-30 u-p-b-30 border-box" hover-class="hover-class" hover-stay-time="50" style="position: relative;">
					<view class="icon u-flex u-row-center u-col-center">
						<u-icon name="/static/icon/user1.png" size="46"></u-icon>
					</view>
					<view class="title u-p-t-10 u-font-12" :style="{color: vk.getVuex('$app.config.color.main')}">邀请好友</view>
					<view class="cont u-light-color u-p-t-10 u-font-12" :style="{color: vk.getVuex('$app.config.color.light')}">邀请好友赚积分</view>
					<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
				</view>
				<view class="tab u-flex-col u-row-center u-col-center u-p-t-30 u-p-b-30 border-box" hover-class="hover-class" hover-stay-time="50" @click="signClick">
					<view class="icon u-flex u-row-center u-col-center" :class="isSign?'icons':''">
						<u-icon name="/static/icon/user2.png" size="46"></u-icon>
					</view>
					<view class="title u-p-t-10 u-font-12" :style="{color: vk.getVuex('$app.config.color.main')}">每日签到</view>
					<view class="cont u-light-color u-p-t-10 u-font-12" :style="{color: vk.getVuex('$app.config.color.light')}">每天免费领{{vk.getVuex('$setting.score.name')}}</view>
				</view>
				<view class="tab u-flex-col u-row-center u-col-center u-p-t-30 u-p-b-30 border-box" hover-class="hover-class" hover-stay-time="50" @click="taskClick">
					<view class="icon u-flex u-row-center u-col-center">
						<u-icon name="/static/icon/user3.png" size="46"></u-icon>
					</view>
					<view class="title u-p-t-10 u-font-12" :style="{color: vk.getVuex('$app.config.color.main')}">{{vk.getVuex('$setting.score.name')}}任务</view>
					<view class="cont u-light-color u-p-t-10 u-font-12" :style="{color: vk.getVuex('$app.config.color.light')}">更多途径赚{{vk.getVuex('$setting.score.name')}}</view>
				</view>
			</view>
			<view class="order u-m-t-15 bg-white u-p-l-20 u-p-r-20 u-m-l-30 u-m-r-30 border-ra" :style="{background: vk.getVuex('$app.config.bg.tab')}">
				<view class="u-p-l-10 u-p-r-10 u-flex u-row-between u-p-t-25 u-p-b-25 border-bottom" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
					<view class="u-bold u-font-15">我的订单</view>
					<view class="u-flex u-row-left" @click="orderClick(0)">
						<view class="u-font-12 u-p-r-5" :style="{color: vk.getVuex('$app.config.color.light')}">全部订单</view>
						<view class="arror-right" :style="{borderColor: vk.getVuex('$app.config.color.light')}"></view>
					</view>
				</view>
				<view class="u-flex u-row-around u-p-b-30 u-p-t-30">
					<view class="row u-flex u-flex-col u-row-center" @click="orderClick(0)">
						<u-icon name="/static/icon/fahuo.png" size="50"></u-icon>
						<view class="u-p-t-10 u-font-13">壁纸</view>
						<view class="jiaobiao" v-if="orderNum.orderNum1 > 0">{{orderNum.orderNum1<10?orderNum.orderNum1:'···'}}</view>
					</view>
					<view class="row u-flex u-flex-col u-row-center" @click="orderClick(1)">
						<u-icon name="/static/icon/shouhuo.png" size="50"></u-icon>
						<view class="u-p-t-10 u-font-13">头像</view>
						<view class="jiaobiao" v-if="orderNum.orderNum2 > 0">{{orderNum.orderNum2<10?orderNum.orderNum2:'···'}}</view>
					</view>
					<view class="row u-flex u-flex-col u-row-center" @click="orderClick(3)">
						<u-icon name="/static/icon/wancheng.png" size="50"></u-icon>
						<view class="u-p-t-10 u-font-13">动态</view>
					</view>
					<view class="row u-flex u-flex-col u-row-center" @click="orderClick(2)">
						<u-icon name="/static/icon/qita.png" size="50"></u-icon>
						<view class="u-p-t-10 u-font-13">表情包</view>
					</view>
				</view>
			</view>
			<view class="order u-m-t-20 bg-white u-p-l-20 u-p-r-20 u-m-l-30 u-m-r-30 u-p-b-15 border-ra" :style="{background: vk.getVuex('$app.config.bg.tab')}">
				<view class="u-p-l-10 u-p-r-10 u-p-t-25 u-p-b-25 border-bottom" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
					<view class="u-bold u-font-15">我的服务</view>
				</view>
				<view class="u-flex u-row-around u-p-b-30 u-p-t-30">
					<view class="row u-flex u-flex-col u-row-center" @click="recordClick">
						<u-icon name="/static/icon/jifen.png" size="56"></u-icon>
						<view class="u-p-t-10">{{vk.getVuex('$setting.score.name')}}</view>
					</view>
					<view class="row u-flex u-flex-col u-row-center">
						<u-icon name="/static/icon/feed.png" size="56"></u-icon>
						<view class="u-p-t-10">反馈</view>
						<button open-type='feedback' style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
					</view>
					<view class="row u-flex u-flex-col u-row-center" @click="helpClick">
						<u-icon name="/static/icon/help.png" size="56"></u-icon>
						<view class="u-p-t-10">帮助</view>
					</view>
					<view class="row u-flex u-flex-col u-row-center" @click="aboutClick">
						<u-icon name="/static/icon/about.png" size="56"></u-icon>
						<view class="u-p-t-10">关于</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-center u-col-center u-p-t-40 u-p-b-40" v-if="vk.getVuex('$setting.base.copyright_logo') && vk.getVuex('$setting.base.copyright_text')">
				<image :src="vk.getVuex('$setting.base.copyright_logo')" style="width: 33rpx;height: 33rpx;border-radius: 8rpx;opacity: 0.7;"></image>
				<text class="u-tips-color u-font-13 u-p-l-10" style="color: #404040;">{{vk.getVuex('$setting.base.copyright_text')}}</text>
			</view>
			<view class="" style="height: 20rpx;"></view>
		</view>
		
		<models v-if="loginShow"
		title="为了更好的玩机体验，点击下方按钮授权登录吧~"
		btnText="授权登录" 
		:authorize="true"
		@mask="loginShow = false" 
		@close="loginShow = false"></models>
		
		<models v-if="signShow"
		:title="signTitle"
		btnText="知道了" 
		closeText=" " 
		@mask="signShow = false" 
		@save="signShow = false"></models>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync()
	// px转换到rpx的比例
	let pxToRpxScale = 750 / systemInfo.windowWidth;
	// 状态栏的高度
	let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
	// 导航栏的高度
	let navigationHeight = 44 * pxToRpxScale
	// 总高度
	let navHeight = ktxStatusHeight + navigationHeight
	// 获取系统状态栏的高度
	export default {
		data() {
			return {
				loadFlag: false,
				navHeight: navHeight,
				// 签到
				isSign: false,
				signShow: false,
				signTitle: '',
				// 菜单显示
				writeShow: false,
				// 登录弹窗
				loginShow: false,
				noticeCount: 0,
				orderNum: {}
			}
		},
		async onLoad() {
			let that = this
			that.$nextTick(() => {
				setTimeout(function(){
					that.loadFlag = true
					that.$refs.loading.closeLoading()
				},300)
			})
		},
		async onShow(){
			let that = this
			if(that.vk.getVuex('$user.userInfo._id')){
				await that.getSign()
				await that.getScore()
				await that.getNotice()
			}
		},
		methods: {
			loginClick(){
				let that = this
				if(!that.vk.getVuex('$user.userInfo._id')){
					// #ifdef APP-PLUS
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					uni.hideLoading()
					uni.login({
					    provider: 'univerify',
					    univerifyStyle: { 
							fullScreen: true,
							// backgroundColor: "#1F1F1F",
							// authButton: {  
							// 	normalColor: "#f8c93c",
							// 	highlightColor: "#fce03d",
							// 	disabledColor: "#fce77b",
							// 	textColor: "#ffffff",
							// 	title: "本机号码一键登录",
							// 	borderRadius: "24px"
							// }
							otherLoginButton: {  
								visible: false, // 是否显示其他登录按钮，默认值：true  
							}, 
						},
						async success(res){  //预登录成功
							// 显示一键登录选项
							let data = await that.vk.callFunction({
								url: 'user/pub/loginByUniverify',
								data:{
									access_token: res.authResult.access_token,
									openid: res.authResult.openid
								}
							});
							if(data.code === 0){
								uni.closeAuthView()
								uni.showToast({
									icon: 'none',
									mask: true,
									title: data.msg,
									duration: 1500
								})
							}
						},
						fail(res){  // 预登录失败
							uni.closeAuthView()
							// 不显示一键登录选项（或置灰）
							// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
							console.log(res.errCode)
							console.log(res.errMsg)
						}
					})
					// #endif
					// #ifndef APP-PLUS
					that.loginShow = true
					// #endif
				}else{
					if(that.vk.getVuex('$user.userInfo.auth') && that.vk.getVuex('$user.userInfo.auth.status') === 1){
						uni.navigateTo({
							url: '/pages/write/home?id='+that.vk.getVuex('$user.userInfo._id')
						})
					}
				}
			},
			async signClick(){
				var that = this
				if(!that.vk.getVuex('$user.userInfo._id')){
					that.loginShow = true
					return
				}
				if(!that.vk.getVuex('$setting.score.sign_score') || that.vk.getVuex('$setting.score.sign_score') <= 0){
					that.$u.toast('未开启签到功能');
					return
				}
				if(that.isSign){
					that.$u.toast('已经签到过啦~');
					return
				}
				
				uni.showLoading({
					mask: true,
					title: '签到中...'
				})
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/setSign',
					data:{
						_id: that.vk.getVuex('$user.userInfo._id')
					},
				});
				uni.hideLoading()
				if(data.code === 0){
					that.vk.setVuex('$user.userInfo.score', data.user.score)
					that.signTitle = "<div style='padding-top: 10px;'>签到成功，恭喜你获得<span class='num' style='color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+data.score+"</span>"+that.vk.getVuex('$setting.score.name')+"，明天记得来哦~</div>"
					that.signShow = true
					that.isSign = true
				}else{
					uni.showToast({
						icon: 'none',
						mask: true,
						title: sign.result.msg,
						duration: 1500
					})
				}
			},
			async getNotice(){
				var that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/getNotice',
					data:{
						user_id: that.vk.getVuex('$user.userInfo._id')
					},
				});
				that.noticeCount = data.count
			},
			recordClick(){
				if(!this.vk.getVuex('$user.userInfo._id')){
					this.loginShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/score/record'
				})
			},
			taskClick(){
				if(!this.vk.getVuex('$user.userInfo._id')){
					this.loginShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/score/task'
				})
			},
			redClick(){
				uni.navigateTo({
					url: '/pages/tip/tip'
				})
			},
			noticeClick(){
				if(!this.vk.getVuex('$user.userInfo._id')){
					this.loginShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/about/notice'
				})
			},
			helpClick(){
				uni.navigateTo({
					url: '/pages/help/help'
				})
			},
			feedClick(){
				if(!this.vk.getVuex('$user.userInfo._id')){
					this.loginShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/about/feed'
				})
			},
			aboutClick(){
				uni.navigateTo({
					url: '/pages/about/about'
				})
			},
			orderClick(index){
				if(!this.vk.getVuex('$user.userInfo._id')){
					this.loginShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/order/order?index='+index
				})
			},
			tipClick(){
				if(!this.vk.getVuex('$user.userInfo._id')){
					this.loginShow = true
					return
				}
				uni.navigateTo({
					url: '/pages/tip/order'
				})
			},
			clearClick(){
				this.$u.toast('缓存清除成功');
			},
			
			// 我的
			async getSign(){
				let that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/count',
					data:{
						dbName: 'uni-id-scores',
						user_id: that.vk.getVuex('$user.userInfo._id'),
						comment: '每日签到',
						day: true
					},
				});
				if(data.num > 0) that.isSign = true
				else that.isSign = false
			},
			async getScore(){
				let that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/findOne',
					data:{
						dbName: 'uni-id-users',
						whereJson: {
							_id: that.vk.getVuex('$user.userInfo._id')
						},
						foreignDB: [{
							dbName: "bus-wx-auth",
							localKey:"_id",
							localKeyType: "array",
							foreignKey: "user_id",
							as: "auth",
							limit: 1
						}]
					},
				});
				if(data.info){
					that.vk.setVuex('$user.userInfo.score', data.info.score)
					if(data.info.vip_time) that.vk.setVuex('$user.userInfo.vip_time', data.info.vip_time)
					if(data.info.auth) that.vk.setVuex('$user.userInfo.auth', data.info.auth)
				}
			},
			// 授权登录
			getUserInfo(){
				var that = this
				that.loginShow = false
				uni.showLoading({
					mask: true,
					title: '授权中...'
				})
				uni.getUserProfile({
				    desc: '更新您的个人信息',
				    success: async (res) => {
						uni.hideLoading()
						uni.login({
							success: async function({code}) {
								let data = await that.vk.myfn.userLogin(code,res.userInfo)
								that.getSign()
								that.vk.setVuex('$user.userInfo.vip_time', '')
								that.vk.setVuex('$user.userInfo.auth', {})
								that.getScore()
							},
						});
				    },
				    fail(err){
						uni.hideLoading()
					    uni.showToast({
							icon: 'none',
							title: '授权失败',
							duration: 1500
					    })
				    }
				})
			},
		},
		onShareAppMessage(res) {
			return {
				title: '这里有超多好看的壁纸免费下载~',
				imageUrl: this.vk.getVuex('$setting.base.image'),
				path: 'pages/index/index?inviteId='+(this.vk.getVuex('$user.userInfo._id')?this.vk.getVuex('$user.userInfo._id'):'')
			}
		},
		onShareTimeline(res) {
			return {
				title: '分享一个壁纸小程序，超多高清壁纸免费下载~',
				imageUrl: this.vk.getVuex('$setting.base.image'),
				path: 'pages/index/index'
			}
		}
	}
</script>

<style lang="scss">
	.row{
		width: 25%;
		position: relative;
	}
	.jiaobiao{
		position: absolute;
		top: -2px;
		right: 20px;
		background: #FF0000;
		color: #FFF;
		width: 28rpx;
		height: 28rpx;
		font-size: 10px;
		text-align: center;
		line-height: 28rpx;
		border-radius: 28rpx;
	}
	.user{
		.avatar{
			width: 130rpx;
			height: 130rpx;
			border-radius: 130rpx;
			border: 10rpx solid;
		}
		.name{
			font-size: 20px;
			font-weight: 700;
		}
		.number{
			color: #ffc36a;
		}
	}
	.bg-white{
		position: relative;
		// box-shadow: 0 0px 24px rgba(231, 231, 231, 0.65);
	}
	.border-ra{
		border-radius: 16rpx;
	}
	.u-bold{
		font-weight: 550;
	}
	.jifen{
		.tab{
			position: relative;
			width: 234rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;
			.title{
				font-weight: 550;
			}
			.icon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
			}
		}
		.tab:nth-child(1) .icon{
			background-image: linear-gradient(to right, #84D787 , #5FBB92);
		}
		.tab:nth-child(2) .icon{
			background-image: linear-gradient(to right, #F5D553 , #F0B347);
		}
		.tab:nth-child(2) .icons{
			background-image: linear-gradient(to right, #dadada , #dadada);
		}
		.tab:nth-child(3) .icon{
			background-image: linear-gradient(to right, #7a95ee, #7050f0);
		}
	}
	.border-box{
		// box-shadow: 0 0px 24px rgba(231, 231, 231, 0.65);
		border-radius: 16rpx;
	}
	.menu{
		image{
			width: 38rpx;
			height: 38rpx;
		}
	}
	.border-bottom{
		border-bottom: 1rpx solid #1F1F1F;
	}
	.hover-class{
		transform:scale(0.95);
		transition: all 0.2s;
	}
	.arror-right{
		width: 15rpx;
		height: 15rpx;
		border-top: 3rpx solid #a9acb3;
		border-right: 3rpx solid #a9acb3;
		transform: rotate(45deg);
	}
	.quit{
		color: #fa6868;
	}
	
	/deep/ .num{
		font-size: 16px;
		font-weight: 700;
		padding: 0 8rpx;
	}
</style>

